<template>
  <div class="mod-config" style="margin-top: 30px">
    <div v-if="showBlock">
      <el-table
        style="width: 100%"
        :data="dataList"
        border
        v-show="tabType == 1"
        v-loading="dataListLoading"
      >
        <el-table-column
          type="index"
          width="80"
          header-align="center"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="renwuName"
          header-align="center"
          align="center"
          label="任务名称"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.renwuName" placeholder="任务名称" />
          </template>
        </el-table-column>
        <el-table-column label="难度系数" header-align="center" align="center">
          <el-table-column
            prop="zycd"
            header-align="center"
            align="center"
            label="重要程度"
          >
            <template slot="header" slot-scope="scope">
              <span style="margin-right: 15px">重要程度</span>
              <el-tooltip class="item" effect="dark" placement="top-start">
                <div slot="content">
                  说明：<br />
                  1. 重要程度高，是指重点任务对集团层面有重要影响；<br />
                  2. 重要程度较高，是指重点任务对公司层面有重要影响；<br />
                  3. 重要程度一般，是指重点任务对部门层面有重要影响；<br />
                </div>
                <i class="el-icon-info" style="color: #3e51a3"></i>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-select v-model="scope.row.zycd" placeholder="请选择重要程度">
                <el-option
                  v-for="(item, index) in chengduList"
                  :label="item.type"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="wcnd"
            header-align="center"
            align="center"
            label="完成难度"
          >
            <template slot="header" slot-scope="scope">
              <span style="margin-right: 15px">完成难度</span>
              <el-tooltip class="item" effect="dark" placement="top-start">
                <div slot="content">
                  说明：<br />
                  1. 完成难度高，是指重点任务创新性强、协调难度大；<br />
                  2.
                  完成难度较高，是指重点任务有一定创新性、需要争取政策支持；<br />
                  3.
                  完成难度一般，是指重点任务有一定难度，但有专业团队支持，本部门能够独立承担工作；<br />
                </div>
                <i class="el-icon-info" style="color: #3e51a3"></i>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-select v-model="scope.row.wcnd" placeholder="请选择完成难度">
                <el-option
                  v-for="(item, index) in chengduList"
                  :label="item.type"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="任务有效期"
          min-width="400"
        >
          <el-table-column
            prop="rwYxqq"
            align="center"
            label="开始时间"
            width="200"
          >
            <template slot-scope="scope">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="scope.row.rwYxqq"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                :pickerOptions="startTimPickerOptions"
                @focus="handleFocus(scope.row.rwYxqz)"
              ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            prop="rwYxqz"
            align="center"
            label="结束时间"
            width="200"
          >
            <template slot-scope="scope">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="scope.row.rwYxqz"
                value-format="yyyy-MM-dd"
                style="width: 100%"
                :pickerOptions="endTimPickerOptions"
                @focus="handleFocus(scope.row.rwYxqq)"
              ></el-date-picker>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="khrName"
          header-align="center"
          align="center"
          label="考核人"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.khrName">{{scope.row.khrName}}</span>
            <i class="el-icon-edit-outline" style="margin-left: 10px;" @click="chooseBtn(scope.row)"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="weightset"
          header-align="center"
          align="center"
          label="权重"
        >
          <template slot-scope="scope">
            <el-input
              type="number"
              min="0"
              max="100"
              oninput="value=value.replace(/[^\d]/g,0);if(isNaN(value))value=0;if(value>100)value=100;
                                      if(value<0)value=0;if(value.charAt(0)==0&&value.charAt(1)!='')value=0"
              v-model="scope.row.weightset"
              placeholder="请输入内容"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="workTarget"
          header-align="center"
          align="center"
          label="工作目标/成效"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.workTarget"
              placeholder="工作目标/成效"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="60"
          header-align="center"
          align="center"
        >
          <template slot="header">
            <el-button
              type="primary"
              icon="el-icon-plus"
              circle
              :disabled="
                renwuFqForm.userLx == 1 ||
                renwuFqForm.userLx == null ||
                renwuFqForm.signDate == null
              "
              @click="add()"
            ></el-button>
          </template>
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-minus"
              :disabled="
                renwuFqForm.userLx == 1 ||
                renwuFqForm.userLx == null ||
                renwuFqForm.signDate == null
              "
              circle
              @click="delBtn(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <sortingPerChooseDialog
      :sortingPerChooseDialogData="sortingPerChooseDialogData"
      @sortingPerChooseDialogChild="sortingPerChooseDialogChild"
    ></sortingPerChooseDialog>
  </div>
</template>

<script>
import { getRenwuZhibiaoPage } from "@/api/hetongrenwu/zhongdian/renwuchuangjian";
import {getList} from '@/api/hetongrenwu/zhongdian/renyuanfenzu'
import sortingPerChooseDialog from "@/views/hetongrenwu/components/sortingPerChooseDialog.vue";
var clickStartTime = "";
export default {
  name: "zhongdianrwcj-form",
  components: {
    sortingPerChooseDialog
  },
  props: {
    renwuFqForm: {
      userLx: null,
      signDate: null,
    },
  },
  data() {
    return {
      endTimPickerOptions: {
        disabledDate(time, a, b) {
          var startDate = new Date(clickStartTime);
          return time.getTime() < startDate.getTime();
        },
      },
      startTimPickerOptions:{
        disabledDate(time, a, b) {
          var startDate = new Date(clickStartTime);
          return time.getTime() > startDate.getTime();
        },
      },
      showBlock: true,
      dataForm: {},
      tabType: "1",
      radio: "1",
      dataList: [],
      dataListLoading: false,
      dialogVisible: false,
      form: {},
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      renwuId: "",
      renwuName: "",
      khzq: "",
      type: 0,
      index: 1,
      str:"",
      str1:"",
      chengduList: [],
      sortingPerChooseDialogData:{},
    };
  },
  watch: {
    renwuFqForm: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.showBlock = false;
          this.$nextTick((res) => {
            this.showBlock = true;
            this.getxList();
          });
          console.log('ss'+JSON.stringify(newVal))
          this.str = newVal.rwYxqq;
          this.str1 = newVal.rwYxqz;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    init(row, type) {

      console.log(row)
      //type=1为任务发起进来的，2为创建任务进来的
      this.form.renwuName = row.faqiName;
      this.dataList = [];
      this.type = type;
      if (type == 1) {
        this.form.renwuId = row.id;
        this.renwuId = row.id;
      } else {
        this.form.renwuId = row.renwuId;
        this.renwuId = row.renwuId;
      }
      this.renwuName = row.faqiName;
      this.khzq = row.rwYxqq + "至" + row.rwYxqz;
      
      this.getDataList();
      this.getxList();
    },
    getxList(){
      getList().then(res=>{
        this.chengduList = res.data.data;
      })
    },
    getDataList() {
      this.dataListLoading = true;
      getRenwuZhibiaoPage(
        Object.assign({
          type: this.radio,
          current: this.pageIndex,
          size: this.pageSize,
          renwuId: this.renwuId,
          bkhNumber: this.dataForm.bkhNumber,
          str: this.type,
          bkhName: this.dataForm.bkhName,
          khrZhiwu: this.dataForm.khrZhiwu,
        })
      ).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
      });
      this.dataListLoading = false;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    add() {
      if(this.chengduList.length == 0){
        this.$message.warning('请先配置难度系数，再添加任务')
        return
      }
      this.index = this.dataList.length + 1;
      var item = {
        renwuName: "任务名称" + this.index,
        bkhName: "1",
        zycd: this.chengduList[0].id,
        wcnd: this.chengduList[0].id,
        weightset: "0",
        rwYxqq: this.str,
        rwYxqz: this.str1,
        workTarget: "无",
        dataProvider: "1",
        providerName: "1",
        khrName:"",
        khrId:"",
        index: this.index,
      };
      this.dataList.push(item);
    },
    chooseBtn(row){
      this.sortingPerChooseDialogData={
        visible: true,
        types:"zdrw",
        perLsit:{
          userName:row.khrName,
          userId:row.khrId,
        },
        index:row.index
      }
    },
    sortingPerChooseDialogChild(data){
      this.dataList.forEach(ele=>{
        if(data.index == ele.index){
          ele.khrName = data.khrName,
          ele.khrId = data.khrId
        }
      })
    },
    delBtn(row) {
      this.dataList.forEach((eles, i) => {
        if (row.index == eles.index) {
          this.dataList.splice(i, 1);
        }
      });
    },
    handleFocus(startTime) {
      clickStartTime = startTime;
    },
    
  },
};
</script>

<style>
</style>
